<template>
	<view>
		<view class="form">
			<view class="username">
				<u--input :clearable="true" border="none" placeholder="手机号码" v-model="phoneNumber" maxlength="11"
					placeholder-style="color: #d7d7d9;" @blur="userNameblur" />
			</view>
			<view class="password">
				<u--input :clearable="true" border="none" placeholder="验证码" type="number"
					placeholder-style="color: #d7d7d9;" maxlength="6" v-model="vcodeNumber" />
				<button :class="{active : !disableCodeBtn}" :disabled="disableCodeBtn"
					@tap="sendCode">{{codeBtn.text}}</button>
			</view>


			<!-- <view class="huo-box">或</view> -->
			<!-- <view class="btn btn2" @tap="toPage('login2')">账号登录</view> -->

			<!-- <view class="res"> -->
			<!-- <view @tap="toPage('login2')" style="color: #ff4a32; text-decoration: underline;"></view> -->
			<view class="res" @click="togglePopup('center', 'image')" style="font-size: 26rpx;">
				<image src="../../../static/img/wenhao.png"
					style="width: 35rpx; height: 36rpx; vertical-align: middle;"></image>
				验证码收不到?
			</view>
			<!-- </view> -->

			<view class="btn" @tap="doLoginTo">立即登录/免费注册</view>
		</view>

		<!-- 收不到验证码？ -->
		<uni-popup ref="showimage" :type="type" :mask-click="true" @change="change">
			<view class="popup-yzm">
				<view class="yzm-close" @click="cancel('image')">
					<image src="../../../static/img/close.png" />
				</view>
				<view class="yzm-title">收不到验证码？</view>
				<view class="yzm-text">
					<view>1、查看是否误设了短信拦截。</view>
					<view>2、若该号码欠费停机，建议您更换手机号码或者缴费后第二天重新获取。</view>
					<view>3，联系运营商（<text class="yunyingshang" @click="yunyingshang">{{serverTel}}</text>）取消黑名单。</view>
					<view>4，如果是信号网络延迟，可稍后常识重新获取。</view>
				</view>
			</view>
		</uni-popup>
		<!-- 采招网服务条款 -->
		<uni-popup ref="showtip" :type="type" :mask-click="false" @change="change">
			<view class="fuwutiaokuan">
				<view class="fwtk-title">中国采招网服务条款</view>
				<view class="fwtk-content">
					<view class="fwtk-Ftitle">1. 特别提示</view>
					<view class="fwtk-text">1.1 中国采招网同意按照本协议的规定及其不定时发布的操作规则提供基于互联网的相关服务（以下称"网络服务
						"）。为获得网络服务，服务使用人（以下称"用户"）应当同意本协议的全部条款并按照页面上的提示完成全部的注册程序。用户在进行注册程序过程中点击"接受服务条款"即表示用户完全接受本协议项下的全部条款。
					</view>
					<view class="fwtk-Ftitle">2. 服务内容</view>
					<view class="fwtk-text">2.1 中国采招网网络服务的具体内容由中国采招网根据实际情况提供，并保留随时变更、中断或终止部分或全部网络服务的权利。</view>
					<view class="fwtk-text">2.2
						中国采招网在提供网络服务时，会对部分网络服务的用户收取一定的费用。在此情况下，中国采招网会在相关页面上做明确的提示。如用户拒绝支付该项费用，则不能使用相关的网络服务。</view>
				</view>
				<button class="fwtk-btn" @click="cancel('tip')">同意协议</button>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	export default {
		components: {},
		props: ['tongyi', 'fromurl', 'tiaozhuantype', 'name'],
		data() {
			return {
				type: '',
				seconds: 60,
				codeBtn: {
					text: '获取验证码',
					waitingCode: false,
					count: this.seconds,
					vtoken: ''
				},
				vcodeNumber: '',
				phoneNumber: this.name ? this.name : '',
				password: '',
				serverTel: this.baseConfig.serverTel,
				// ispreLogin: false, //预登陆验证 true：成功 
				// tongyi: false
			}
		},
		mounted() {
			this.getSendCodeVToken();
		},

		// onShow() {
		// 	this.getSendCodeVToken();
		// 	// const istongyi = uni.getStorageSync('AgreeService');
		// 	// if (istongyi) {
		// 	// 	this.tongyi = true;
		// 	// }
		// },
		// onNavigationBarButtonTap(e) {
		// 	uni.switchTab({
		// 		url: "/pages/index/index"
		// 	})
		// },
		computed: {
			disableCodeBtn: function() {
				return this.codeBtn.waitingCode;
			}
		},
		methods: {
			userNameblur(value) {
				// console.log(e.detail.value)
				// this.username = e.detail.value;
				this.$emit('update:name', value)
			},
			// back() {
			// 	console.log('back()');
			// 	uni.switchTab({
			// 		url: '/pages/index/index'
			// 	});
			// },
			// fuwutiaokuan() {
			// 	uni.navigateTo({
			// 		url: "/pages/index/webview/common-webview?weburl=https://www.bidcenter.com.cn/help/fwtk.shtml"
			// 	})
			// },
			// yinsizhengce(){
			// 	uni.navigateTo({
			// 		url: "/pages/index/webview/common-webview?weburl=https://www.bidcenter.com.cn/help/yszc.shtml"
			// 	})
			// },

			gotourl(type, url) {
				//type: tab  nav
				// if (type == 'tab') {
				// 	uni.switchTab({
				// 		url: url
				// 	})
				// } else if (type == 'nav') {
				// 	uni.navigateTo({
				// 		url: url
				// 	})
				// }
				uni.reLaunch({
					url: url
				})
			},

			doLoginTo() {
				uni.hideKeyboard();
				if (!this.tongyi) {
					uni.showToast({
						title: '请勾选同意采招网服务条款及隐私政策！',
						icon: "none"
					});
					return false;
				}
				//验证手机号码
				if (!(/^1\d{10}$/.test(this.phoneNumber))) {
					uni.showToast({
						title: '请填写正确手机号码',
						icon: "none"
					});
					return false;
				}
				//验证码
				if (!(/^\d{6}$/.test(this.vcodeNumber))) {
					uni.showToast({
						title: '输入验证码格式有误',
						icon: "none"
					});
					return false;
				}
				uni.showLoading({
					title: '提交中...'
				})
				//访问接口获取验证码
				let data = this.initNewData();
				//位置类别
				data.type = 0;
				data.location = 5116;
				data.vcode = this.vcodeNumber;
				data.mobile = this.phoneNumber;
				uni.request({
					url: this.baseConfig.serverURL + 'User/login/UserLoginHandler.ashx', //检查更新的服务器地址
					data: data,
					method: "POST",
					header: {
						"content-type": "application/x-www-form-urlencoded" //"application/json"
					},
					success: (res) => {
						uni.hideToast();
						if (res.statusCode == 200) {
							if (!res.data.ret) {
								uni.showToast({
									title: res.data.msg,
									icon: "none"
								});
							} else {
								this.currUser = res.data.other2;
								uni.setStorageSync("curruser", this.currUser)

								if (this.fromurl != '' && this.tiaozhuantype != '') {
									if (this.fromurl.indexOf('common-webview') > 0) {
										uni.navigateBack({
											delta: 1
										});
									} else {
										this.gotourl(this.tiaozhuantype, this.fromurl);
									}
								} else {
									uni.navigateBack({
										delta: 1
									});
								}
								uni.hideLoading();

								//存储记录 下次登录不用再次勾选服务条款
								uni.setStorage({
									key: 'AgreeService',
									data: true
								});

								// 更新登录状态
								this.checkLogin();
							}
						} else {
							uni.showToast({
								title: '登录失败',
								icon: "none"
							});
						}
					},
					fail: (res) => {
						uni.showToast({
							title: '登录失败！',
							icon: "none"
						});
					}
				})
			},
			sendCode() {
				//等待验证码
				if (this.codeBtn.waitingCode)
					return false;
				//如果初始验证密钥为空，重新获取
				if (this.phoneNumber != "" && this.codeBtn.vtoken == "") {
					this.getSendCodeVToken();
				}
				//验证手机号码
				if (!(/^1\d{10}$/.test(this.phoneNumber))) {
					uni.showToast({
						title: '请填写正确手机号码',
						icon: "none"
					});
					return false;
				} else if (this.codeBtn.vtoken == "") {
					uni.showToast({
						title: '当前页面已失效，请重新打开本页面！',
						icon: "none"
					});
					return false;
				}
				this.codeBtn.waitingCode = true;
				this.codeBtn.count = this.seconds;
				this.codeBtn.text = this.codeBtn.count + '秒后重发';

				let countdown = setInterval(() => {
					this.codeBtn.count--;
					this.codeBtn.text = this.codeBtn.count + '秒后重发';
					if (this.codeBtn.count < 0) {
						clearInterval(countdown);
						this.codeBtn.text = '重新发送';
						this.codeBtn.waitingCode = false;
					}
				}, 1000);
				//访问接口获取验证码
				let data = this.initNewData();
				//位置类别
				data.location = 5116;
				data.vtoken = this.codeBtn.vtoken;
				data.mobile = this.phoneNumber;
				uni.request({
					url: this.baseConfig.serverURL + 'sms/GetVCodeHandler.ashx', //检查更新的服务器地址
					data: data,
					method: "POST",
					header: {
						"content-type": "application/x-www-form-urlencoded" //"application/json"
					},
					success: (res) => {
						if (res.statusCode == 200) {
							if (!res.data.ret) {
								uni.showToast({
									title: res.data.msg,
									icon: "none"
								});
							}
						} else {
							uni.showToast({
								title: '获取验证码失败！',
								icon: "none"
							});
						}
					},
					fail: (res) => {
						uni.showToast({
							title: '获取验证码失败，可能已超时！',
							icon: "none"
						});
					}
				})
			},
			/***发送验证码验证串**/
			/**
			 * jmsg.retbs = 12586;
               jmsg.msg = "您的操作过于频繁，请稍候再试！";
			 */
			getSendCodeVToken() {
				let data = this.initNewData();
				//位置类别
				data.location = 5116;
				uni.request({
					url: this.baseConfig.serverURL + 'sms/GetVCodeTokenHandler.ashx', //检查更新的服务器地址
					data: data,
					method: "POST",
					header: {
						"content-type": "application/x-www-form-urlencoded" //"application/json"
					},
					success: (res) => {
						if (res.statusCode == 200) {
							if (res.data.ret) {
								//更新vtoken 
								this.codeBtn.vtoken = res.data.other;
							} else {
								if (jmsg.retbs = 12586) {
									uni.showToast({
										title: jmsg.msg || '您的操作过于频繁，请稍候再试！',
										icon: "none"
									});
								} else {
									setTimeout(this.getSendCodeVToken(), 1000)
								}
							}
						} else {
							// setTimeout(this.getSendCodeVToken(), 1000)
						}
					},
					fail: (res) => {
						// setTimeout(this.getSendCodeVToken(), 1000)
					}
				})
			},
			yunyingshang() {
				uni.makePhoneCall({
					phoneNumber: this.serverTel
				})
			},
			togglePopup(type, open) {
				this.type = type
				this.$nextTick(() => {
					this.$refs['show' + open].open()
				})
			},
			cancel(type) {
				this.$refs['show' + type].close()
			},
			change(e) {
				//console.log('是否打开:' + e.show)
			},

		},
		// onBackPress() {
		// 	if (this.fromurl == '/pages/user/custom/custom') {
		// 		this.gotourl('tab', '/pages/index/index');
		// 		return true;
		// 	} else if (this.fromurl == '/pages/user/huiyuan/payment') {
		// 		// uni.navigateBack({
		// 		// 	delta: 2
		// 		// });
		// 		// return true;
		// 	}
		// }
	}
</script>

<style lang="scss">
	@import "../../../static/css/login.scss";

	.form {

		.res-btn {
			color: #375fe1;
			text-decoration: underline;
		}


		.huo-box {
			text-align: center;
			color: #C0C0C0;
			margin: 20rpx 0;
			font-size: 30rpx;
		}

		.btn2 {
			background-color: #fff;
			border: 1px solid #375fe1;
			color: #375fe1;
			box-sizing: border-box;
		}
	}

	.oauth {
		// @media all and (max-height: 150vw) {
		// 	display: none;
		// }

		position: absolute;
		bottom: 50rpx;
		width: 100%;

		.text {
			width: 100%;
			height: 60upx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #cccbcb;
			font-size: 28upx;
		}

		.list {
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 20upx 0;

			.icon {
				font-size: 80upx;
				margin: 0 30upx;
			}
		}
	}

	.weixin {
		image {
			width: 86rpx;
			height: 90rpx;
		}
	}

	.text-tips {
		margin-top: 30rpx;
		text-align: center;
		font-size: 28rpx;
		color: #cccbcb;
		line-height: 40rpx;
	}

	.yzm-btn {
		font-size: 28rpx;
		color: #ff4a32;
		border: 1px solid #ff4a32;
		border-radius: 3px;
		padding: 14rpx 0px;
		width: 40%;
		text-align: center;

		&:after {
			border: none;
		}

		&.active {
			background-color: #ff4a32;
			color: #fff;
		}
	}

	.password {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;

		button {
			font-size: 28rpx;
			// color: #ff4a32 !important;
			color: #2F6DFE !important;
			// border: 1px solid #ff4a32;
			border-radius: 3px;
			padding: 14rpx 0px;
			// width: 40%;
			text-align: center;
			line-height: 36rpx;
			background-color: #FFFFFF !important;

			&:after {
				border: none
			}

			&.active {
				background-color: #ff4a32;
				color: #fff;
			}
		}
	}

	.popup-yzm {
		background-color: #fff;
		width: 90%;
		border-radius: 20rpx;
		position: relative;
		margin-left: 5%;

		.yzm-close {
			position: absolute;
			right: 20rpx;
			top: 20rpx;

			image {
				width: 50rpx;
				height: 49rpx;
			}
		}

		.yzm-title {
			padding-top: 35rpx;
			text-align: center;
			font-size: 35rpx;
		}

		.yzm-text {
			font-size: 28rpx;
			color: #666666;
			line-height: 40rpx;
			padding: 20rpx 64rpx;

			view {
				margin-bottom: 20rpx;
			}

			.yunyingshang {
				text-decoration: underline;
				color: #2660CD;
			}
		}
	}

	.fuwutiaokuan {
		width: 90%;
		background-color: #fff;
		border-radius: 20rpx;
		position: relative;
		margin-left: 5%;
		padding-top: 30rpx;
		overflow: hidden;

		.fwtk-title {
			text-align: center;
			font-size: 35rpx;
		}

		.fwtk-content {
			padding: 0 30rpx 30rpx;

			// height: 200rpx;
			// overflow-x: hidden;
			// overflow-y: scroll;
			//  -webkit-overflow-scrolling: touch;
			.fwtk-Ftitle {
				padding-top: 30rpx;
				font-size: 30rpx;
			}

			.fwtk-text {
				font-size: 26rpx;
				color: #666666;
				line-height: 32rpx;
				padding-top: 20rpx;
			}
		}

		.fwtk-btn {
			color: #fff;
			background-color: #2F69E0;
			border-radius: 0;
			font-size: 34rpx;
		}
	}
</style>